<script>
export default {
  name: 'ProjectReport',
  props: {
    queryParams: {
      required: false,
      default: null
    }
  },
  watch: {
    queryParams: {
      async handler(val) {
        const param = {}
        if (val.sceneProjectId) {
          param.ids = [val.sceneProjectId]
          const projectRes = await this.$api.sceneProject.queryProjectList(param)
          this.projectList = projectRes.data
        } else {
          this.projectList = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      projectList: []
    }
  }
}
</script>

<template>
  <el-row class="project-container">
    <h2>01 项目概述</h2>
    <table v-for="project in projectList" :key="project.id">
      <tbody>
      <tr>
        <td class="label">项目名称</td>
        <td>{{ project.projectName }}</td>
      </tr>
      <tr>
        <td class="label">项目地点</td>
        <td>{{ project.address }}</td>
      </tr>
      <tr>
        <td class="label">交付时间</td>
        <td>{{ project.deliverTime }}</td>
      </tr>
      <tr>
        <td class="label">项目总用地面积（㎡）</td>
        <td>{{ project.landArea }}</td>
      </tr>
      <tr>
        <td class="label">总建筑面积（㎡）</td>
        <td>{{ project.floorArea }}</td>
      </tr>
      <tr>
        <td class="label">绿地面积（㎡）</td>
        <td>{{ project.greenArea }}</td>
      </tr>
      <tr>
        <td class="label">项目负责人</td>
        <td>{{ project.userName }}</td>
      </tr>
      <tr>
        <td class="label">联系方式</td>
        <td>{{ project.mobilePhone }}</td>
      </tr>
      <tr>
        <td class="label">项目状态</td>
        <td>{{ project.statusName }}</td>
      </tr>
      </tbody>
    </table>
  </el-row>
</template>

<style scoped lang="scss">
.project-container {

  table {
    border-collapse: collapse;
    margin: 0 5% 1% 5%;
    width: 90%;
    font-size: 16px;
    font-weight: 500;

    .label {
      width: 20%;
      text-align: right;
      padding-right: 20px;
      background-color: rgb(2, 149, 144);
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: left;
    }
  }
}
</style>
